<script setup>

import Comp1 from "./Comp1.vue";
import Comp2 from "./Comp2.vue";
import {ref} from "vue";

// 要求：只能同时显示一个或者都不显示
// status1 控制 Comp1
let status1 = ref(false)
// status2 控制 Comp2
let status2 = ref(false)

function comp1Clicked() {
  status1.value = true
  status2.value = false
}

function comp2Clicked() {
  status2.value = true
  status1.value = false
}

</script>

<template>
  <button v-on:click="comp1Clicked">Comp1</button>
  <button v-on:click="comp2Clicked">Comp2</button>
  <hr>
  <Comp1 v-if="status1"></Comp1>
  <Comp2 v-if="status2"></Comp2>
</template>

<style scoped>

</style>